<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue核心基础 | 浪飞IT小栈</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="前后端技术分享">
    <meta name="keywords" content="前端博客,后端博客,人工智能,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown,java,Spring,Springboot,Redis,mysql">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.ada71c49.css" as="style"><link rel="preload" href="/assets/js/app.a2a00aa5.js" as="script"><link rel="preload" href="/assets/js/2.256f807a.js" as="script"><link rel="preload" href="/assets/js/56.bd4c1a8e.js" as="script"><link rel="prefetch" href="/assets/js/10.ab144fe3.js"><link rel="prefetch" href="/assets/js/11.062e0879.js"><link rel="prefetch" href="/assets/js/12.f9c60882.js"><link rel="prefetch" href="/assets/js/13.0a6ebfcf.js"><link rel="prefetch" href="/assets/js/14.03fc6f12.js"><link rel="prefetch" href="/assets/js/15.19dbf9fd.js"><link rel="prefetch" href="/assets/js/16.6e68160b.js"><link rel="prefetch" href="/assets/js/17.1d678834.js"><link rel="prefetch" href="/assets/js/18.4536fd5c.js"><link rel="prefetch" href="/assets/js/19.9c1b65df.js"><link rel="prefetch" href="/assets/js/20.c5f96e71.js"><link rel="prefetch" href="/assets/js/21.3f0b334e.js"><link rel="prefetch" href="/assets/js/22.55c868be.js"><link rel="prefetch" href="/assets/js/23.91286241.js"><link rel="prefetch" href="/assets/js/24.c1af1909.js"><link rel="prefetch" href="/assets/js/25.a995a755.js"><link rel="prefetch" href="/assets/js/26.abc5dea3.js"><link rel="prefetch" href="/assets/js/27.1eb62850.js"><link rel="prefetch" href="/assets/js/28.b383a871.js"><link rel="prefetch" href="/assets/js/29.088e0d73.js"><link rel="prefetch" href="/assets/js/3.cd716564.js"><link rel="prefetch" href="/assets/js/30.3ccc98d5.js"><link rel="prefetch" href="/assets/js/31.aab7cc23.js"><link rel="prefetch" href="/assets/js/32.5e16b7e6.js"><link rel="prefetch" href="/assets/js/33.4aaeb741.js"><link rel="prefetch" href="/assets/js/34.45e8e898.js"><link rel="prefetch" href="/assets/js/35.5899c97a.js"><link rel="prefetch" href="/assets/js/36.32e2e263.js"><link rel="prefetch" href="/assets/js/37.c4e27bbd.js"><link rel="prefetch" href="/assets/js/38.fe5e60d2.js"><link rel="prefetch" href="/assets/js/39.2cb0b4ee.js"><link rel="prefetch" href="/assets/js/4.edf4d5e7.js"><link rel="prefetch" href="/assets/js/40.08d5bead.js"><link rel="prefetch" href="/assets/js/41.2f80f24b.js"><link rel="prefetch" href="/assets/js/42.43a49913.js"><link rel="prefetch" href="/assets/js/43.08da7ec2.js"><link rel="prefetch" href="/assets/js/44.7c7cb8a9.js"><link rel="prefetch" href="/assets/js/45.0ddf7e7f.js"><link rel="prefetch" href="/assets/js/46.7c4609a5.js"><link rel="prefetch" href="/assets/js/47.edf3ddf8.js"><link rel="prefetch" href="/assets/js/48.569a90b9.js"><link rel="prefetch" href="/assets/js/49.fa368ac8.js"><link rel="prefetch" href="/assets/js/5.24054156.js"><link rel="prefetch" href="/assets/js/50.b9b3ea7f.js"><link rel="prefetch" href="/assets/js/51.a2ebf0fe.js"><link rel="prefetch" href="/assets/js/52.31f02238.js"><link rel="prefetch" href="/assets/js/53.4110ef1e.js"><link rel="prefetch" href="/assets/js/54.dab741c7.js"><link rel="prefetch" href="/assets/js/55.f27984e9.js"><link rel="prefetch" href="/assets/js/57.375d40cb.js"><link rel="prefetch" href="/assets/js/58.932e3864.js"><link rel="prefetch" href="/assets/js/59.e657be1b.js"><link rel="prefetch" href="/assets/js/6.b259c061.js"><link rel="prefetch" href="/assets/js/60.88d94274.js"><link rel="prefetch" href="/assets/js/61.fa71d884.js"><link rel="prefetch" href="/assets/js/62.a9d3b3b7.js"><link rel="prefetch" href="/assets/js/63.f849fe75.js"><link rel="prefetch" href="/assets/js/64.1770f7a9.js"><link rel="prefetch" href="/assets/js/65.6afc33db.js"><link rel="prefetch" href="/assets/js/66.799f2eb4.js"><link rel="prefetch" href="/assets/js/67.f36b2f7d.js"><link rel="prefetch" href="/assets/js/68.868cd00b.js"><link rel="prefetch" href="/assets/js/69.4c29b907.js"><link rel="prefetch" href="/assets/js/7.e34ea00f.js"><link rel="prefetch" href="/assets/js/70.1b993ed4.js"><link rel="prefetch" href="/assets/js/71.e16ad4f9.js"><link rel="prefetch" href="/assets/js/72.627505e6.js"><link rel="prefetch" href="/assets/js/73.32768e14.js"><link rel="prefetch" href="/assets/js/74.968a580d.js"><link rel="prefetch" href="/assets/js/75.42d5af3d.js"><link rel="prefetch" href="/assets/js/76.19a69d31.js"><link rel="prefetch" href="/assets/js/77.cf627a78.js"><link rel="prefetch" href="/assets/js/78.07177880.js"><link rel="prefetch" href="/assets/js/8.c4dd00ce.js"><link rel="prefetch" href="/assets/js/9.0ff73be2.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ada71c49.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="浪飞IT小栈" class="logo"> <span class="site-name can-hide">浪飞IT小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/avatar.jpg"> <div class="blogger-info"><h3>浪飞yes</h3> <span>无法简单的人儿~</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开篇</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>面向对象</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>常用类</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础高级</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>数据库</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端技术</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>热门框架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前后端分离</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/9234b6/" class="sidebar-link">ECMAScript6</a></li><li><a href="/pages/2288f1/" class="sidebar-link">异步请求-Ajax</a></li><li><a href="/pages/508d4a/" aria-current="page" class="active sidebar-link">Vue核心基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#一、今日学习内容与目标" class="sidebar-link">一、今日学习内容与目标</a></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#二、vue-简介" class="sidebar-link">二、Vue 简介</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_2-1-定义" class="sidebar-link">2.1 定义</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_2-2-介绍" class="sidebar-link">2.2 介绍</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#三、mvvm" class="sidebar-link">三、MVVM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_3-1-mvc-模型" class="sidebar-link">3.1 MVC 模型</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_3-2-mvvm-模型" class="sidebar-link">3.2 MVVM 模型</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_3-3-vue-与-mvvm-模型" class="sidebar-link">3.3 Vue 与 MVVM 模型</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#四、vue-安装使用" class="sidebar-link">四、Vue 安装使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_4-1-cdn-引入" class="sidebar-link">4.1 CDN 引入</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_4-2-下载后引入" class="sidebar-link">4.2 下载后引入</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_4-3-命令行工具-cli" class="sidebar-link">4.3 命令行工具 (CLI)</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_4-4-入门案例" class="sidebar-link">4.4 入门案例</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#五、vue-基本使用" class="sidebar-link">五、Vue 基本使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-1-文本插值" class="sidebar-link">5.1 文本插值</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-2-属性插值" class="sidebar-link">5.2 属性插值</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-3-class-与-style-绑定" class="sidebar-link">5.3 Class 与 Style 绑定</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-4-条件渲染" class="sidebar-link">5.4 条件渲染</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-5-循环渲染" class="sidebar-link">5.5 循环渲染</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-6-事件处理" class="sidebar-link">5.6 事件处理</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-7-双向绑定" class="sidebar-link">5.7 双向绑定</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-8-计算属性" class="sidebar-link">5.8 计算属性</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-9-侦听器" class="sidebar-link">5.9 侦听器</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_5-10-过滤器" class="sidebar-link">5.10 过滤器</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#六、vue-生命周期" class="sidebar-link">六、Vue 生命周期</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_6-1-生命周期图" class="sidebar-link">6.1 生命周期图</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_6-2-生命周期钩子函数" class="sidebar-link">6.2 生命周期钩子函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_6-3-生命周期示例" class="sidebar-link">6.3 生命周期示例</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_6-4-使用用场景" class="sidebar-link">6.4 使用用场景</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#七、es6-中的对象简化写法" class="sidebar-link">七、ES6 中的对象简化写法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_7-1-对象简写方式" class="sidebar-link">7.1 对象简写方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_7-2-ajax-简写方式" class="sidebar-link">7.2 Ajax 简写方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_7-3-vue-方法的简写" class="sidebar-link">7.3 Vue 方法的简写</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#八、vue-组件化开发" class="sidebar-link">八、Vue 组件化开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_8-1-组件" class="sidebar-link">8.1 组件</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_8-2-组件化" class="sidebar-link">8.2 组件化</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_8-3-组件使用" class="sidebar-link">8.3 组件使用</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_8-3-1-全局组件" class="sidebar-link">8.3.1 全局组件</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_8-3-2-局部组件" class="sidebar-link">8.3.2 局部组件</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#九、node-js" class="sidebar-link">九、Node.js</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_9-1-安装" class="sidebar-link">9.1 安装</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_9-1-1-普通安装方式" class="sidebar-link">9.1.1 普通安装方式</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_9-1-2-多版本安装方式" class="sidebar-link">9.1.2 多版本安装方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_9-2-简单使用" class="sidebar-link">9.2 简单使用</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十、npm" class="sidebar-link">十、NPM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_10-1-作用" class="sidebar-link">10.1 作用</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_10-2-初始项目" class="sidebar-link">10.2 初始项目</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_10-3-依赖管理" class="sidebar-link">10.3 依赖管理</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_10-3-1-全局模式与本地模式" class="sidebar-link">10.3.1 全局模式与本地模式</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_10-3-2-依赖安装" class="sidebar-link">10.3.2 依赖安装</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_10-3-3-生产环境与开发环境" class="sidebar-link">10.3.3 生产环境与开发环境</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十一、模块化" class="sidebar-link">十一、模块化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_11-1-基本概念" class="sidebar-link">11.1 基本概念</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_11-2-好处" class="sidebar-link">11.2 好处</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_11-3-模块化规范" class="sidebar-link">11.3 模块化规范</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_11-4-commonjs-模块化规范" class="sidebar-link">11.4 CommonJS 模块化规范</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_11-5-es6-模块化规范" class="sidebar-link">11.5 ES6 模块化规范</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十二、vue-cli" class="sidebar-link">十二、Vue CLI</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_12-1-安装-vue-cli" class="sidebar-link">12.1 安装 Vue ClI</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_12-2-创建运行项目" class="sidebar-link">12.2 创建运行项目</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_12-3-项目结构" class="sidebar-link">12.3 项目结构</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_12-4-vue-文件" class="sidebar-link">12.4 vue 文件</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十三、vue-router" class="sidebar-link">十三、vue-router</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_13-1-vue-router-基本使用" class="sidebar-link">13.1 vue-router 基本使用</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_13-2-路由懒加载" class="sidebar-link">13.2 路由懒加载</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十四、路由模式" class="sidebar-link">十四、路由模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_14-1-spa" class="sidebar-link">14.1 SPA</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_14-2-前端路由" class="sidebar-link">14.2 前端路由</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_14-2-1-hash-模式" class="sidebar-link">14.2.1 hash 模式</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_14-2-2-history-模式" class="sidebar-link">14.2.2 history 模式</a></li><li class="sidebar-sub-header level4"><a href="/pages/508d4a/#_14-2-3-两种模式对比" class="sidebar-link">14.2.3 两种模式对比</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十五、element-ui" class="sidebar-link">十五、Element UI</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_15-1-引入" class="sidebar-link">15.1 引入</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_15-2-使用" class="sidebar-link">15.2 使用</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十六、axios" class="sidebar-link">十六、Axios</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_16-1-安装入门使用" class="sidebar-link">16.1 安装入门使用</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_16-2-发送-get-请求" class="sidebar-link">16.2 发送 GET 请求</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_16-3-发送-post-请求" class="sidebar-link">16.3 发送 POST 请求</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/508d4a/#十七、小结与作业" class="sidebar-link">十七、小结与作业</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_17-1-小结" class="sidebar-link">17.1 小结</a></li><li class="sidebar-sub-header level3"><a href="/pages/508d4a/#_17-2-作业" class="sidebar-link">17.2 作业</a></li></ul></li></ul></li><li><a href="/pages/6ea31e/" class="sidebar-link">RESTful课件</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>权限控制</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>NoSQL</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>微服务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>消息中间件</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>脚手架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>技术增值</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/categories/?category=Java%E9%80%9F%E9%80%9A" title="分类" data-v-06225672>Java速通</a></li><li data-v-06225672><a href="/categories/?category=%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB" title="分类" data-v-06225672>前后端分离</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/langfeiyes" target="_blank" title="作者" class="beLink" data-v-06225672>langfeiyes</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2024-03-10</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">Vue核心基础<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="vue"><a href="#vue" class="header-anchor">#</a> Vue</h1> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/Benefits-of-Using-VUE.JS.jpeg" alt=""></p> <h2 id="一、今日学习内容与目标"><a href="#一、今日学习内容与目标" class="header-anchor">#</a> 一、今日学习内容与目标</h2> <ul><li>什么是 MVVM 思想。</li> <li>Vue 的常见指令。</li> <li>什么是组件以及其作用。</li> <li>Vue 生命周期钩子函数的作用。</li> <li>Node.js 定义及其作用，掌握 Node.js 安装。</li> <li>NPM 的作用，掌握其使用。</li> <li>模块化，掌握 CommonJS 模块化 和 ES6 模块化。</li> <li>Webpack 作用。</li> <li>Vue CLI 脚⼿架搭建项目，熟悉项目结构。</li> <li>前端路由。</li> <li>使用 Element UI。</li></ul> <h2 id="二、vue-简介"><a href="#二、vue-简介" class="header-anchor">#</a> 二、Vue 简介</h2> <h3 id="_2-1-定义"><a href="#_2-1-定义" class="header-anchor">#</a> 2.1 定义</h3> <p>Vue（读⾳ /vjuː/，类似于 view），不要读错。是一套用于构建用户界面的渐进式 MVVM 模型框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p> <blockquote><p>Vue 是⼀个渐进式的前端框架，什么是渐进式的呢？
简单来说可以理解为轻量级，Vue.js 核⼼库只提供了基础功能，让你在使用 Vue 作为开发框架时，不需要⼀次性引入过重的依赖，可以先使用核⼼功能，如果应用再进⼀步升级变得更复杂以后，可以逐渐的引入 Vue 生态的其他组件，例如 vue-router、vuex、 Axios 等，而不是⼀股脑的⼀次性全塞进来。</p></blockquote> <blockquote><p>单页 Web 应用（single page web application，SPA），就是只有一张 Web 页面的应用。单页应用程序（SPA）是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML、CSS 和 JavaScript，所有的操作都在这张页面上完成，都由 JavaScript 来控制。</p></blockquote> <h3 id="_2-2-介绍"><a href="#_2-2-介绍" class="header-anchor">#</a> 2.2 介绍</h3> <p>英文官网: https://vuejs.org/    中文官网: https://cn.vuejs.org/</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20230415161455587.png" alt=""></p> <p><strong>特点</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>- 解耦视图和数据；
- 双向数据绑定；
- 可复用的组件；
- 前端路由技术；
- 状态管理；
- 虚拟 DOM；
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="三、mvvm"><a href="#三、mvvm" class="header-anchor">#</a> 三、MVVM</h2> <h3 id="_3-1-mvc-模型"><a href="#_3-1-mvc-模型" class="header-anchor">#</a> 3.1 MVC 模型</h3> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/20240311222116.png" alt=""></p> <p>这种 MVC 架构模式对于简单的应用来看起是 OK 的，也符合软件架构的分层思想。 但实际上，随着 H5 的不断发展，人们更希望使用 H5 开发的应用能和 Native 媲美，或者接近于原生 App 的体验效果，于是前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题：</p> <ul><li>开发者在代码中大量调用相同的 DOM API，处理繁琐，操作冗余，使得代码难以维护。</li> <li>大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。</li> <li>当 Model 频繁发生变化，开发者需要主动更新到 View ；当用户的操作导致 View 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。</li></ul> <h3 id="_3-2-mvvm-模型"><a href="#_3-2-mvvm-模型" class="header-anchor">#</a> 3.2 MVVM 模型</h3> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/MVVM.png" alt=""></p> <ul><li>MVVM 由 Model，View，ViewModel 三部分构成，Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。</li> <li>在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，且是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。</li> <li>ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。</li></ul> <h3 id="_3-3-vue-与-mvvm-模型"><a href="#_3-3-vue-与-mvvm-模型" class="header-anchor">#</a> 3.3 Vue 与 MVVM 模型</h3> <p>Vue 可以说是 MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，做到了数据双向绑定，实现了 View 和 Model 之间的同步。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/Vue_MVVP.png" alt=""></p> <h2 id="四、vue-安装使用"><a href="#四、vue-安装使用" class="header-anchor">#</a> 四、Vue 安装使用</h2> <p>与 Java 中，Vue 作为一个第三方框架，使用它的第⼀个步骤就是引入依赖，而前端依赖库都是以 js 文件的形式存在的，因此我们只需要在所需要的页面中引入对应的 js 文件即可。</p> <h3 id="_4-1-cdn-引入"><a href="#_4-1-cdn-引入" class="header-anchor">#</a> 4.1 CDN 引入</h3> <p>可以简单将 CDN 理解为⼀个加速服务器，它会在离用户最近的服务器站点上建立用户所需要资源的缓存，帮助用户以更快的速度加载资源。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 开发环境版本，包含了有帮助的命令⾏警告 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 生产环境版本，优化了尺⼨和速度 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/vue@2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_4-2-下载后引入"><a href="#_4-2-下载后引入" class="header-anchor">#</a> 4.2 下载后引入</h3> <p>利用上方的 CDN 地址，访问后将内容拷贝下来，保存到本地资源文件中，然后再引入页面即可。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 开发环境版本，包含了有帮助的命令⾏警告 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;/static/js/vue-2.7.10/vue.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 生产环境版本，优化了尺⼨和速度 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;/static/js/vue-2.7.10/vue.min.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_4-3-命令行工具-cli"><a href="#_4-3-命令行工具-cli" class="header-anchor">#</a> 4.3 命令行工具 (CLI)</h3> <p>后续通过 Vue-CLI（脚⼿架）⽅式引入，刚开始学习使用前面两种即可，后续使用这种方式。</p> <h3 id="_4-4-入门案例"><a href="#_4-4-入门案例" class="header-anchor">#</a> 4.4 入门案例</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ie=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 页面先要引入 Vue.js --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>       
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>              
            <span class="token literal-property property">el</span> <span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>                <span class="token comment">// 针对页面 id 为 app 的元素，支持多种选择器</span>
            <span class="token literal-property property">data</span> <span class="token operator">:</span> <span class="token punctuation">{</span>                    
                <span class="token literal-property property">message</span> <span class="token operator">:</span> <span class="token string">'你好美'</span>
            <span class="token punctuation">}</span>    
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>上面的代码做了什么事情？（了解，重点掌握格式的书写！）</p> <ul><li>1、先看 js 代码，会发现创建了⼀个 Vue 对象。</li> <li>2、创建 Vue 对象的时候，传入了⼀个 JS 对象。
<ul><li>2.1、对象中的 el 属性：该属性决定了这个 Vue 对象挂载到哪⼀个元素上，很明显，我们这里挂载到了 id 为 app 的元素上。</li> <li>2.2、对象中的 data 属性：该属性中通常会存储⼀些数据，上面例子中的 msg 就是直接定义出来的数据</li></ul></li> <li>3、Vue 帮我们通过 id 找到了页面上的 app 元素，并且将其中  表达式替换为了 data 中的数据</li> <li>4、执行完上面的代码，数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器控制台，修改 <code>app.message</code> 的值，你将看到上例相应地更新。</li></ul> <h2 id="五、vue-基本使用"><a href="#五、vue-基本使用" class="header-anchor">#</a> 五、Vue 基本使用</h2> <p>指令 (Directives) 是带有 <code>v-</code> 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式（<code>v-for</code> 是例外情况，稍后我们再讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。</p> <h3 id="_5-1-文本插值"><a href="#_5-1-文本插值" class="header-anchor">#</a> 5.1 文本插值</h3> <p>给元素中间插入值，有以下几种方式，对比如下。</p> <table><thead><tr><th>插值</th> <th>标签数据</th> <th>元素中内容</th> <th>JavaScript 表达式</th></tr></thead> <tbody><tr><td>插值表达式</td> <td>不支持</td> <td>不会覆盖</td> <td>支持</td></tr> <tr><td>v-text</td> <td>不支持</td> <td>会覆盖</td> <td>支持</td></tr> <tr><td>v-html</td> <td>支持</td> <td>会覆盖</td> <td>支持</td></tr></tbody></table> <p>注意：</p> <ul><li>Vue 都提供了完全的 JavaScript 表达式支持，如下：</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code>{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ msg3.toUpperCase() }}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ie=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{msg1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>       
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">v-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>msg2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>msg3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>              
            <span class="token literal-property property">el</span> <span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>                
            <span class="token literal-property property">data</span> <span class="token operator">:</span> <span class="token punctuation">{</span>                    
                <span class="token literal-property property">msg1</span> <span class="token operator">:</span> <span class="token string">'你好美'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">msg2</span> <span class="token operator">:</span> <span class="token string">'你好高'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">msg3</span> <span class="token operator">:</span> <span class="token string">'&lt;h1&gt;你好傻&lt;/h1&gt;'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="_5-2-属性插值"><a href="#_5-2-属性插值" class="header-anchor">#</a> 5.2 属性插值</h3> <p>给元素属性插入值。使用指令 <code>v-bind</code>。值支持 JavaScript 表达式，指令可以简写成冒号。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message + '吗？'<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>             
        <span class="token literal-property property">el</span> <span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>                
        <span class="token literal-property property">data</span> <span class="token operator">:</span> <span class="token punctuation">{</span>                   
            <span class="token literal-property property">message</span> <span class="token operator">:</span> <span class="token string">'你好美'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="_5-3-class-与-style-绑定"><a href="#_5-3-class-与-style-绑定" class="header-anchor">#</a> 5.3 Class 与 Style 绑定</h3> <p>操作元素的 <code>class</code> 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 <code>v-bind</code> 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 <code>v-bind</code> 用于 <code>class</code> 和 <code>style</code> 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.active</span> <span class="token punctuation">{</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 3px solid blue<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.error</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{active : isActive, error : isError}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>绑定 Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>styleObj<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>绑定 Style<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">isActive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">isError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">styleObj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token string">'2px solid green'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'150px'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'150px'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_5-4-条件渲染"><a href="#_5-4-条件渲染" class="header-anchor">#</a> 5.4 条件渲染</h3> <p><code>v-if</code> 和 <code>v-show</code> 都是来控制标签是否显示，但是也有区别，<code>v-show</code> 是对样式层面的控制，<code>v-if</code> 是对 DOM 节点的控制。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v‐if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>score &gt;= 90<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>优秀<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v‐else‐if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>score &gt;= 80 &amp;&amp; score &lt; 90<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>良好<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v‐else‐if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>score &gt;= 60 &amp;&amp; score &lt; 80<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>一般<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v‐else</span><span class="token punctuation">&gt;</span></span>不及格<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v‐show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flag<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>天下第一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">&quot;#app&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">scores</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
        <span class="token literal-property property">flag</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>大家可以尝试在浏览器控制器修改 <code>app.score</code> 和 <code>app.flag</code> 的值来看效果。</p> <blockquote><p>一般来说，<code>v-if</code> 有更高的切换开销，而 <code>v-show</code> 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 <code>v-show</code> 较好；如果在运行时条件很少改变，则使用 <code>v-if</code> 较好。</p></blockquote> <h3 id="_5-5-循环渲染"><a href="#_5-5-循环渲染" class="header-anchor">#</a> 5.5 循环渲染</h3> <p><code>v-for</code> 指令可以对⼀个数组/集合数据进⾏遍历，遍历的对象可以是⼀个数组，也可以就是⼀个对象。</p> <ul><li>数组遍历：可以得到数组的元素与索引值；</li> <li>对象遍历：可以得到对象的属性值与属性名。</li></ul> <p>语法格式如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 遍历数组，index 可选</span>
v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in arr&quot;</span>
<span class="token comment">// 遍历对象，name 和 index 可选</span>
v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(value, name, index) in object&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(book, index) in books<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{index}} : {{book}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value, name, index) in author<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{index}} : {{name}} : {{value}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">&quot;#app&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">books</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;三国演示&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;残唐五代史演义&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token literal-property property">author</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;罗贯中&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">&quot;70&quot;</span>
        <span class="token punctuation">}</span>      
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_5-6-事件处理"><a href="#_5-6-事件处理" class="header-anchor">#</a> 5.6 事件处理</h3> <p>可以用 <code>v-on</code> 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。可简写成 <code>@</code> 符号。其语法：</p> <ul><li><p>全写：<code>v-on:事件名称=&quot;响应处理函数&quot;</code></p></li> <li><p>简写：<code>@事件名称=&quot;响应处理函数&quot;</code></p></li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clickImg<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">@mouseover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeImg($event, 'b.png')<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">@mouseleave</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeImg($event, 'c.png')<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>美女<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">/**
   * 事件的关键对象:
   *  1. 事件源
   *    1.1. 在绑定事件时, 传入 this 参数，只在传统 html 下才可用，在 Vue 中不可以使用
   *    1.2. 通过事件对象.currentTarget 属性获取
   *  2. 事件对象
   *    2.1. 直接在绑定事件处, 传入 $event 对象即可
   *    2.2. 绑定事件时, 直接绑定响应处理函数的引用, 而不是调用该函数
   *  3. 事件响应处理函数
   *    3.1. 事件响应函数编写在 methods 属性中
   *  4. 事件名称
   *    4.1. v-on:事件名称（传统事件名称去掉 on）
   *    4.2. @事件名称（传统事件名称去掉 on）
*/</span>

<span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">img</span><span class="token operator">:</span> <span class="token string">'a.png'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">clickImg</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>currentTarget<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">changeImg</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><h3 id="_5-7-双向绑定"><a href="#_5-7-双向绑定" class="header-anchor">#</a> 5.7 双向绑定</h3> <p>数据的双向绑定可以简单理解为就是对 MVVM 思想的一种标准实现了，Vue 通过 <code>Object.defineProperty</code> 对数据与视图分别进行监听，实现了视图的变动会影响到数据，数据的变动同时也会影响到视图。</p> <p>实际开发中，通常将双向数据绑定应用在表单元素上，通过 <code>v-model</code> 指令将表单元素与对应 <code>data</code> 中的数据进行绑定。</p> <p>语法：<code>&lt;表单元素 v-model=&quot;数据名称&quot;&gt;</code>。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 对表单元素进行双向绑定 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>msg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>city<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
  
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cities<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cities<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>city<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>成都<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gz<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>广州<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sy<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>沈阳<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'数据双向绑定'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'gz'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>大家可以尝试修改表单元素中的值，再到浏览器控制器看下 <code>app.msg</code> 和 <code>app.city</code> 的值。</p> <blockquote><p>Vue 选项关键属性：</p> <ul><li>el：表示要将 Vue 绑定到哪个标签上，以该标签作为视图；</li> <li>data：保存数据，视图中需要的数据从这⾥取；</li> <li>methods：定义视图所需要使用的⽅法，如事件响应处理函数可以定义在此处。</li></ul></blockquote> <h3 id="_5-8-计算属性"><a href="#_5-8-计算属性" class="header-anchor">#</a> 5.8 计算属性</h3> <p>模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  {{ firtName + lastName }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>若有的需求是要显示获取的字符串数据进行翻转，那么就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用 Vue 的计算属性 <code>computed</code>。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>姓氏：&quot;{{ firstName }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>名字：&quot;{{ lastName }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>姓名：&quot;{{ fullName }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>姓名：&quot;{{ fullName }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'Elon'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'Musk'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">fullName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// `this` 指向 vm 实例</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;fullName 被执行了&quot;</span><span class="token punctuation">)</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>但是发现把 computed 换成 methods 也是可以的。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>姓氏：&quot;{{ firstName }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>名字：&quot;{{ lastName }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>姓名：&quot;{{ fullName() }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>姓名：&quot;{{ fullName() }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'Elon'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'Musk'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">fullName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;fullName 被执行了&quot;</span><span class="token punctuation">)</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><blockquote><p>computed 支持缓存，只有响应式依赖数据发生改变，即在上面的例子中只要 firstName 和 lastName 还没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数。
methods 不缓存，每当触发重新渲染时，调用的函数（定义在 methods 中的）总会再次执行，即在这里 fullName 函数再次被执行。</p></blockquote> <h3 id="_5-9-侦听器"><a href="#_5-9-侦听器" class="header-anchor">#</a> 5.9 侦听器</h3> <p>Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性 <code>watch</code>。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    购买数量:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>count<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
        <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">watch</span><span class="token operator">:</span><span class="token punctuation">{</span>
        <span class="token function-variable function">count</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>val<span class="token operator">&lt;=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;购买数量需要大于1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token number">1</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>val<span class="token operator">&gt;</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;商品每人限购5个&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token number">5</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><blockquote><p>当依赖的值变化时，在 <code>watch</code> 中，是可以做一些复杂的操作的，而 computed 中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。
应用场景：
<code>computed</code>：用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理 watch 和 methods 无法处理的，或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。
<code>watch</code>：用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，或要在数据变化时执行异步或开销较大的操作；一个数据改变影响多个数据。例如用来监控路由、input 输入框值的特殊处理等。</p></blockquote> <h3 id="_5-10-过滤器"><a href="#_5-10-过滤器" class="header-anchor">#</a> 5.10 过滤器</h3> <p>1000000000</p> <p>账户余额 <code>100,000,000 元</code></p> <p>日期格式化  金额格式</p> <p>Vue.js 允许你自定义过滤器，可被用于一些常见的<strong>文本格式化</strong>。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式（后者从 2.1.0+ 开始支持）。过滤器应该被添加在 JavaScript 表达式的尾部，由管道符号 <code>|</code> 连接。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product in products<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            {{ product.name }} : {{ product.price * 80 / 100 + '元' }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product in products<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            {{ product.name }} : {{ product.price | discountFn(50) | formatFn() }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">products</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Apple iPhone 14 Pro'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">7999</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> 
            <span class="token punctuation">{</span>
                <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Model 3'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">279900</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">filters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">discountFn</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> d</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> val <span class="token operator">*</span> d <span class="token operator">/</span> <span class="token number">100</span>

        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">formatFn</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> val <span class="token operator">+</span> <span class="token string">'元'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h2 id="六、vue-生命周期"><a href="#六、vue-生命周期" class="header-anchor">#</a> 六、Vue 生命周期</h2> <p>从 Vue 创建、运⾏、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。</p> <h3 id="_6-1-生命周期图"><a href="#_6-1-生命周期图" class="header-anchor">#</a> 6.1 生命周期图</h3> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/Vuelife.png" alt=""></p> <h3 id="_6-2-生命周期钩子函数"><a href="#_6-2-生命周期钩子函数" class="header-anchor">#</a> 6.2 生命周期钩子函数</h3> <p>就是生命周期事件响应处理函数的别称，我们可以通过实现对应的钩子函数来完成不同的功能。</p> <p><strong>初始化</strong></p> <ul><li><strong>beforeCreate</strong>：实例刚刚在内存中被创建出来，此时还没有初始化 data 和 methods 属性。</li> <li><strong>created</strong>：实例已经在内存中创建好，此时 data 和 methods 已经创建好，此时还没有开始编译模板。</li></ul> <p><strong>挂载</strong></p> <ul><li><strong>beforeMount</strong>：data 的数据可以访问和修改，而且此时的模板已经编译好了，还没有更挂载页面中。</li> <li><strong>mounted</strong>：这个时候已经把编译好的模板挂载到页面指定的容器里。</li></ul> <p><strong>更新</strong></p> <ul><li><strong>beforeUpdate</strong>：状态更新之前执行此函数，此时的 data 中的数据是最新，但是界面上显示的还是旧的，因为此时还没有开始重新渲染 DOM 节点。</li> <li><strong>updated</strong>：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。</li></ul> <p><strong>销毁</strong></p> <ul><li><strong>beforeDestroy</strong>：实例销毁之前调用，在这一步，实例仍然完全可用。</li> <li><strong>destroyed</strong>：实例销毁后调用，调用后，Vue 实例指向的所以东西会被解绑，所有的事件监听器会被移除，所有的子实列也会被销毁。</li></ul> <h3 id="_6-3-生命周期示例"><a href="#_6-3-生命周期示例" class="header-anchor">#</a> 6.3 生命周期示例</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span> {{msg}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'Hello Vue'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">beforeCreate</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforeCreated'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">created</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'created'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">beforeMount</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforeMount'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">mounted</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'mounted'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">beforeUpdate</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforeUpdate'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">updated</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'updated'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">beforeDestroy</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforeDestory'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">destroyed</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'destroyed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><p>大家可以尝试在浏览器控制器运行 <code>app.msg = 'Hi Vue'</code> 和  <code>app.$destroy()</code> 来看效果。</p> <h3 id="_6-4-使用用场景"><a href="#_6-4-使用用场景" class="header-anchor">#</a> 6.4 使用用场景</h3> <table><thead><tr><th><strong>生命周期</strong></th> <th>描述</th></tr></thead> <tbody><tr><td>beforeCreate</td> <td>通常用于插件开发中执行一些初始化任务。</td></tr> <tr><td><strong>created</strong></td> <td><strong>常用于异步数据获取</strong>。</td></tr> <tr><td>beforeMount</td> <td>很少用。</td></tr> <tr><td>mounted</td> <td>可用于获取访问数据和 DOM 元素。</td></tr> <tr><td>beforeUpdate</td> <td>可用于获取更新前各种状态。</td></tr> <tr><td>updated</td> <td>可用于获取更新后各种状态。</td></tr> <tr><td>beforeDestroy</td> <td>可用于一些定时器或订阅的取消。</td></tr> <tr><td>destroyed</td> <td>作用同上。</td></tr></tbody></table> <h2 id="七、es6-中的对象简化写法"><a href="#七、es6-中的对象简化写法" class="header-anchor">#</a> 七、ES6 中的对象简化写法</h2> <h3 id="_7-1-对象简写方式"><a href="#_7-1-对象简写方式" class="header-anchor">#</a> 7.1 对象简写方式</h3> <div class="language-java line-numbers-mode"><pre class="language-java"><code>    <span class="token keyword">var</span> a<span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
         a<span class="token operator">:</span> a<span class="token punctuation">,</span>
         b<span class="token operator">:</span> b<span class="token punctuation">,</span>
         c<span class="token operator">:</span> c
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>

    <span class="token keyword">var</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span>
        a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="_7-2-ajax-简写方式"><a href="#_7-2-ajax-简写方式" class="header-anchor">#</a> 7.2 Ajax 简写方式</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>$<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;/api/login&quot;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;post&quot;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string-property property">&quot;username&quot;</span><span class="token operator">:</span><span class="token string">&quot;123&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;password&quot;</span><span class="token operator">:</span><span class="token string">&quot;111&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">111</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_7-3-vue-方法的简写"><a href="#_7-3-vue-方法的简写" class="header-anchor">#</a> 7.3 Vue 方法的简写</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token keyword">var</span> vue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">&quot;div&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token number">456</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function">clickMe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="八、vue-组件化开发"><a href="#八、vue-组件化开发" class="header-anchor">#</a> 八、Vue 组件化开发</h2> <h3 id="_8-1-组件"><a href="#_8-1-组件" class="header-anchor">#</a> 8.1 组件</h3> <p>组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的 HTML 代码，我们可以将组件看作<strong>自定义的 HTML 元素</strong>。</p> <h3 id="_8-2-组件化"><a href="#_8-2-组件化" class="header-anchor">#</a> 8.2 组件化</h3> <p>所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/components.png" alt=""></p> <p>面对复杂问题的处理方式，把问题拆解成很多个能处理的小问题，再将其放在整体中，会发现大的问题也会迎刃而解。
而组件化的思想也类似：</p> <ul><li>1.如果我们实现⼀个页面结构和逻辑非常复杂的页面时，如果全部⼀起实现会变得非常复杂，而且也不利于后续的维护和迭代功能。</li> <li>2.如果我们把页面分成⼀个个小的功能块，每个功能块能完成属于自己这部分独立的功能，那么整个页面之后的维护和迭代也会变得非常容易。</li></ul> <p>组件化开发的优势：责任分离、可维护性⾼、复用性高。</p> <h3 id="_8-3-组件使用"><a href="#_8-3-组件使用" class="header-anchor">#</a> 8.3 组件使用</h3> <p>Vue.js 的组件的使用有 2 个步骤：注册组件和使用组件。根据注册方式不一样，组件分为全局组件和局部组件。</p> <h4 id="_8-3-1-全局组件"><a href="#_8-3-1-全局组件" class="header-anchor">#</a> 8.3.1 全局组件</h4> <p>通过 <code>Vue.component('组件名称', {配置对象})</code> ⽅法注册的都是全局组件，也就是它们在注册之后可以用在任何新创建的 Vue 实例挂载的区域内使用。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--
    组件开发是基于在原生的 HTML 之上进⾏的
    将已经写好的 HTML ⽚段，作为组件的模板，在不同的地⽅使用到时，只需要修改数据，并使用该组件即可
--&gt;</span>
<span class="token comment">&lt;!-- 
    使用组件 &lt;组件名&gt;&lt;/组件名&gt; 
--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-btn</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-btn</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-btn</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-btn</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-btn</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-btn</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-btn</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-btn</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 注册组件 Vue.component('组件名', {配置对象});</span>
Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-btn'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'&lt;button style=&quot;width: 100px; height: 30px; background-color: aquamarine;&quot;&gt;自定按钮&lt;/button&gt;'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> app1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app1'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> app2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app2'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><blockquote><p>上面案例中，最后的 <code>&lt;my-btn&gt;</code> 由于既不在 app1 中也不在 app2 中，因此⽆法被 Vue 实例所渲染，所以⽆法被显示出来。</p></blockquote> <h4 id="_8-3-2-局部组件"><a href="#_8-3-2-局部组件" class="header-anchor">#</a> 8.3.2 局部组件</h4> <p>全局注册往往是不够理想的，只适用于绝⼤部分视图页面都需要的组件，如果将⼀个使用较少的组件注册到全局，会导致 Webpack 在打包时即使没用到它，也会将其打包进去，导致 js 文件变⼤或变多，请求速度变慢，因此对于特殊场景才会使用到的组件，我们应该将其注册为局部组件。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-table</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-btn</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-btn</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mytable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>ID<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>年龄<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>操作<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>xiaoming<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>18<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> |
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mybtn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aquamarine<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>自定按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> mytableComponent <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'#mytable'</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> mybtnComponent <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'#mybtn'</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> app1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app1'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">'my-table'</span><span class="token operator">:</span> mytableComponent
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> app2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app2'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">'my-btn'</span><span class="token operator">:</span> mybtnComponent
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h2 id="九、node-js"><a href="#九、node-js" class="header-anchor">#</a> 九、Node.js</h2> <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。说白了就是 Node.js 可以让用 JavaScript 语言编写的程序运行在服务端，另外提供操作文件，读取系统信息等等功能。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/jsandnodejs.png" alt=""></p> <blockquote><p>针对有 Java 学习经验的同学，为了更好理解，可以拿 Java 中学习到的东西类比，Node.js 类似 JDK。</p></blockquote> <h3 id="_9-1-安装"><a href="#_9-1-安装" class="header-anchor">#</a> 9.1 安装</h3> <h4 id="_9-1-1-普通安装方式"><a href="#_9-1-1-普通安装方式" class="header-anchor">#</a> 9.1.1 普通安装方式</h4> <p><a href="https://nodejs.org/zh-cn/" target="_blank" rel="noopener noreferrer">官方网站<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240109101725456.png" alt=""></strong></p> <p>生成环境使用选择稳定长期支持版本。普通安装方式的缺点是：切换版本比较麻烦。</p> <h4 id="_9-1-2-多版本安装方式"><a href="#_9-1-2-多版本安装方式" class="header-anchor">#</a> 9.1.2 多版本安装方式</h4> <p><strong>安装 nvm</strong></p> <p>nvm 是一个可以在同一台机器上安装和切换不同版本 Node.js 的工具。下载<a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="noopener noreferrer">nvm<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。
<strong>注意：安装路径不要有中文字符和空格</strong>。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/nvm1.png" alt=""> <img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/nvm2.png" alt=""> <img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/nvm3.png" alt=""></p> <p>安装之后，会自动配置好环境变量。</p> <p><strong>nvm 命令</strong></p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code>nvm version					<span class="token comment">## 查看 nvm 的版本</span>
nvm current					<span class="token comment">## 查看当前使用的版本</span>
nvm list             	 	<span class="token comment">## 查看当前安装的 Node.js 所有版本</span>
nvm <span class="token function">install</span> 版本号    		  <span class="token comment">## 安装指定版本的 Node.js</span>
nvm uninstall 版本号  		  <span class="token comment">## 卸载指定版本的 Node.js</span>
nvm use 版本号				  <span class="token comment">## 选择指定版本的 Node.js</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>安装 Node.js</strong></p> <p>安装前，需事先在 nvm 安装根目录中找到 settings.txt 文件配置一下镜像：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment">## 安装指定版本</span>
nvm <span class="token function">install</span> <span class="token number">12.10</span>.0

<span class="token comment">## 安装最新版本</span>
nvm <span class="token function">install</span> latest
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>指定或切换 Node.js 版本</strong></p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code>nvm use <span class="token number">12.10</span>.0
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>验证 Node.js 安装是否成功</strong></p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">node</span> <span class="token parameter variable">-v</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_9-2-简单使用"><a href="#_9-2-简单使用" class="header-anchor">#</a> 9.2 简单使用</h3> <p>在桌面创建⼀个 hello.js 的文件，在文件内写入如下内容：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello Node.js'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>在桌面打开控制台，输入以下命令：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">node</span> hello.js
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="十、npm"><a href="#十、npm" class="header-anchor">#</a> 十、NPM</h2> <p>NPM（node package manager）是 Node.js 官⽅提供的包管理⼯具，它已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。
NPM 提供了命令⾏⼯具，使你可以⽅便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。</p> <blockquote><p>针对有 Java 学习经验的同学，为了更好理解，可以拿 Java 中学习到的东西类比，NPM 类似 Maven。</p></blockquote> <h3 id="_10-1-作用"><a href="#_10-1-作用" class="header-anchor">#</a> 10.1 作用</h3> <p>在程序开发中我们常常需要依赖别⼈提供的框架，写 JS 也不例外。这些可以重复使用的框架代码被称作包（package）或者模块（module），⼀个包可以是⼀个文件夹放着⼏个文件，同时有⼀个叫做 package.json 的文件。常见的场景有以下⼏种：</p> <ul><li>允许用户从 NPM 服务器下载别⼈编写的第三⽅包到本地使用。</li> <li>允许用户从 NPM 服务器下载并安装别⼈编写的命令⾏程序到本地使用。</li> <li>允许用户将⾃⼰编写的包或命令⾏程序上传到 NPM 服务器供别⼈使用。</li></ul> <p>NPM 是不需要安装的，在你安装 Node.js 的时候就已经安装好了，你可以使用命令来查看你当前的 npm 版本号：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token parameter variable">-v</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_10-2-初始项目"><a href="#_10-2-初始项目" class="header-anchor">#</a> 10.2 初始项目</h3> <p>NPM 管理包的⽅式有点类似 Maven，同样需要⼀个类似 <code>pom.xml</code> 的配置文件来对项目依赖进⾏管理，这个文件就是 <code>package.json</code>，其文件主要有以下内容：</p> <ul><li>name ：包的名称，必须是唯一的，由小写英文字母、数字和下划线组成，不能包含空格。</li> <li>description ：包的简要说明。</li> <li>version ：符合语义化版本识别规范的版本字符串。</li> <li>keywords ：关键字数组，通常用于搜索。</li> <li>maintainers ：维护者数组，每个元素要包含 name、email（可选）、web （可选）字段。</li> <li>contributors ：贡献者数组，格式与 maintainers 相同。包的作者应该是贡献者数组的第一个元素。</li> <li>bugs ：提交 bug 的地址，可以是网址或者电子邮件地址。</li> <li>licenses ：许可证数组，每个元素要包含 type（许可证的名称）和 url（链接到许可证文本的地址）字段。</li> <li>repositories ： 仓库托管地址数组，每个元素要包含 type（仓库的类型，如 git ）</li> <li>url（仓库的地址）和 path（相对于仓库的路径，可选）字段。</li> <li>dependencies ：生成环境包的依赖，一个关联数组，由包名称和版本号组成。</li> <li>devDependencies：开发环境包的依赖，一个关联数组，由包的名称和版本号组成。</li></ul> <p>我们可以通过 npm 命令创建一个包（或者一个项目），对应 Maven 也有这样的命令。我们在磁盘新建一个包（或者项目）文件夹，打开控制台，控制台路径是刚才所建项目所在包路径，输入以下命令：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> init        <span class="token comment">## 初始项目</span>
<span class="token function">npm</span> init <span class="token parameter variable">-y</span>     <span class="token comment">## 初始项目，对比上面不需要输入项目的一些信息，全用默认</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>可以为 <code>init</code> 命令设置项目的⼀些初始默认值，⽐如：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token builtin class-name">set</span> init.author.email <span class="token string">&quot;tom@wolfcode.cn&quot;</span>
<span class="token function">npm</span> <span class="token builtin class-name">set</span> init.author.name <span class="token string">&quot;tom&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_10-3-依赖管理"><a href="#_10-3-依赖管理" class="header-anchor">#</a> 10.3 依赖管理</h3> <blockquote><p>TIP：与 Maven 相同的是，NPM 默认也是从<a href="https://npmjs.com" target="_blank" rel="noopener noreferrer">国外的仓库<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>下载的，那么在国内的我们下载速度肯定是⾮常喜⼈的，甚至可能会下载失败，因此可以通过配置淘宝镜像来解决该问题，但是我们安装 Node.js 之前已经配置好了。</p></blockquote> <h4 id="_10-3-1-全局模式与本地模式"><a href="#_10-3-1-全局模式与本地模式" class="header-anchor">#</a> 10.3.1 全局模式与本地模式</h4> <p>使用 NPM 下载的第三⽅库的安装路径可以被分为本地与全局两种模式：</p> <ul><li>本地模式：默认安装⽅式 <code>npm install xxx</code>，下载的依赖会保存在当前包（或者项目）目录下的 node_modules 目录中。</li> <li>全局模式：执⾏ <code>npm install -g xxx</code> 时，该模块会被保存到全局路径下，并且该工具可以在命令行直接访问。</li></ul> <blockquote><p>总而言之，当我们要把某个包作为工程运行时的一部分时，通过本地模式获取，如果要在命令行下使用，则使用全局模式安装。</p></blockquote> <h4 id="_10-3-2-依赖安装"><a href="#_10-3-2-依赖安装" class="header-anchor">#</a> 10.3.2 依赖安装</h4> <p>这里我们通过安装 Vue 给大家演示如何安装依赖。到之前建好的项目下，打开命令行，输入如下命令：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span> vue@2
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>执行完 package.json 加了⼀个 dependencies 属性，这其中就是存放当前项目所依赖的第三方库的信息，并且这个依赖会被下载到当前项目根目录下的 node_modules 目录中。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>#如果安装很慢的情况，重新设置一下下载源
npm config set registry https://registry.npm.taobao.org
npm config get registry
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_10-3-3-生产环境与开发环境"><a href="#_10-3-3-生产环境与开发环境" class="header-anchor">#</a> 10.3.3 生产环境与开发环境</h4> <blockquote><p>TIP：针对有 Java 学习经验的同学，为了更好理解，类似 Maven 添加依赖配置 scope 的效果。</p></blockquote> <p>NPM 管理的依赖会被分为开发环境（devDenpendencies）和生产环境（denpendencies）：</p> <ul><li>开发环境：只在开发时期才会用的一些依赖，如语法检查、包大小分析开发阶段的工具性质的依赖。</li> <li>生产环境：在项目部署上正式服务器以后还会使用到的依赖。</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment">## 安装的依赖默认生产环境</span>
<span class="token function">npm</span> <span class="token function">install</span> vue
<span class="token comment">## 命令等价于上面</span>
<span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> vue

<span class="token comment">## 安装的开发环境的依赖</span>
<span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> eslint
<span class="token comment">## 命令等价于上面</span>
<span class="token function">npm</span> <span class="token function">install</span> --save-dev eslint
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><blockquote><p>PS：ESlint 是一个插件化的 JavaScript 代码检测工具。</p></blockquote> <p>当你的项目开发完成后，需要将项目交付到对应的服务器或需要切换开发的电脑时，需要重新下载项目所需要的所有依赖，那么此时区分开发环境与生产环境的依赖就有比较大的作用：</p> <ul><li>开发环境下，你只需要在项目根目录执⾏ <code>npm install</code> 命令即可直接将开发环境与生产环境的所有依赖都下载到本地。</li> <li>在服务器上部署运行时只需要下载生产环境的依赖的时候，你只需要执行 <code>npm install --production</code> 命令，或者添加环境变量 <code>NODE_ENV=production</code> 以后再运⾏ <code>npm install</code> 都可以保证只安装生产环境中的依赖。</li></ul> <h2 id="十一、模块化"><a href="#十一、模块化" class="header-anchor">#</a> 十一、模块化</h2> <h3 id="_11-1-基本概念"><a href="#_11-1-基本概念" class="header-anchor">#</a> 11.1 基本概念</h3> <p>事实上模块化开发最终的目的是将程序划分成一个个小的结构；
这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用（<strong>导出</strong>）；
也可以通过某种方式，导入另外结构中的变量、函数、对象等（<strong>引入</strong>）。</p> <p>上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程。</p> <blockquote><p>TIP：针对有 Java 学习经验的同学，为了更好理解，模块类似 Java 文件，导出类似权限修饰符，引入类似 Java 中的 import。</p></blockquote> <h3 id="_11-2-好处"><a href="#_11-2-好处" class="header-anchor">#</a> 11.2 好处</h3> <ul><li>避免命名空间污染：所有代码都运行在模块作用域，不会污染全局作用域；</li> <li>代码复用性提高：模块可以多次加载，不同的模块之间可以互相依赖；</li> <li>责任分离，按需加载：不管模块中暴露了多少功能，都可以只引入自己需要的功能；</li> <li>无需操心模块间依赖问题：模块的加载顺序完全在模块间的引用中体现了。</li></ul> <p>基于以上的特性，大大的增加了前端代码的可维护性。</p> <h3 id="_11-3-模块化规范"><a href="#_11-3-模块化规范" class="header-anchor">#</a> 11.3 模块化规范</h3> <p>基于以上的理论与需求，最终需要落地到实现层面（代码的编写），而这也就涉及到了需要制定相应的代码层面的规范。对书写格式和交互规则的详细描述，就是模块定义规范（Module Definition Specification），市面上主流的模块化有以下规范：</p> <table><thead><tr><th>模块化规范</th> <th>实现</th> <th>运行环境</th></tr></thead> <tbody><tr><td>AMD 规范</td> <td>Require.js</td> <td>浏览器</td></tr> <tr><td>CMD 规范</td> <td>Sea.js</td> <td>浏览器</td></tr> <tr><td>CommonJS 规范</td> <td>Node.js</td> <td>Node.js</td></tr> <tr><td>ES6 规范</td> <td>ECMAscript</td> <td>部分浏览器和 Node.js</td></tr></tbody></table> <p>这里我们重点了解 CommonJS 规范以及 ES6 模块化规范。</p> <h3 id="_11-4-commonjs-模块化规范"><a href="#_11-4-commonjs-模块化规范" class="header-anchor">#</a> 11.4 CommonJS 模块化规范</h3> <p>模块是 Node.js 应用程序的基本组成部分，文件和模块是一一对应的。换言之，一个 Node.js 文件就是一个模块，这个文件可能是 JavaScript 代码、JSON 或者编译过的 C/C++ 扩展。</p> <p>其特点如下：</p> <ul><li>在服务器端，模块的加载是运行时同步加载的。</li> <li>所有代码都运行在模块作用域，不会污染全局作用域。</li> <li>模块可以多次加载，但是只会在第一次加载时与性能一次，然后运行结果就被缓存了，以后再加载。</li> <li>就直接读取缓存结果。要想让模块再次运行，必须清除缓存。</li> <li>模块加载的顺序，按照其在代码中出现的顺序。</li></ul> <p>在 Node.js 中，当每个 JavaScript 文件在执行或被 require 的时候，Node.js 其实创建了一个新的实例 var module = new Module()，这个实例名叫 module。这也就是为什么你并没有定义 module 这个变量，却能 console.log 出来而不会报错的原因。而这个实例中有个 exports 属性默认是空对象，而这个属性的里面值就是该模块被导出的的东西。其他模块要使用这些导出的东西，就得使用 require 导入。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// sum.js</span>
<span class="token keyword">var</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 导出模块 等价于 module.exports.sum = sum</span>
exports<span class="token punctuation">.</span>sum <span class="token operator">=</span> sum<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// main.js</span>
<span class="token comment">// 导入模块</span>
<span class="token keyword">var</span> module <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./03.sum.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>module<span class="token punctuation">.</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_11-5-es6-模块化规范"><a href="#_11-5-es6-模块化规范" class="header-anchor">#</a> 11.5 ES6 模块化规范</h3> <p>随着 2015 年 6 ⽉ ES6 的发布，JS 终于在语⾔层面上实现了模块化功能，使得在编译时就能确定模块的依赖关系，以及其输入和输出的变量，不像 CommonJS 需要在运行时才能确定（例如 FIS 这样的工具只能预处理依赖关系，本质上还是运行时解析），成为浏览器和服务器通用的模块解决⽅案。</p> <p>其有以下特点：</p> <ul><li>静态引入，在 JS 解析到引入指令时，会生成⼀个<strong>只读引用</strong>，只有在真正使用到的地⽅才会从引用的模块中获取到值。</li> <li>由于引入的引用是只读的，因此不能在外部修改被引用模块内的数据。</li> <li>ES6 中引入的变量仅仅是引用，因此在运⾏时引入的值会随着模块中原本值的修改而修改，不会缓存值。</li></ul> <p>ES6 模块化是通过两个关键字 <code>export</code> 和 <code>import</code> 来实现的，从字面意思来理解就是导出和导入：</p> <ul><li><p><code>export</code> 有两种使用⽅式，分别是按需导出和默认导出</p> <ul><li>按需导出：<code>export {a, b, c}</code></li> <li>默认导出：<code>export default xxx</code></li></ul></li> <li><p><code>import</code> 基于两种导出⽅式，可以衍生出三种导入⽅式</p> <ul><li>单独使用按需导入：<code>import {a, b, c} from 'module'</code></li> <li>单独使用默认导入：<code>import xxx from 'module'</code></li> <li>两者同时使用：<code>import xxx, {a, b, c} from 'module</code>'</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">&quot;哈哈&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token function-variable function">c</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;函数&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token punctuation">{</span>a<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span>b<span class="token punctuation">,</span> c<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;呵呵&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>a<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./test.mjs'</span>
<span class="token keyword">import</span> d<span class="token punctuation">,</span> <span class="token punctuation">{</span>b<span class="token punctuation">,</span> c<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./test.mjs'</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">d</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>运行的话会如下错误信息:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>(node:2756) Warning: To load an ES module, set &quot;type&quot;: &quot;module&quot; in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>PS：由于 Node.js 默认的模块化⽅式是 CommonJS，如果要使用 ES6 的模块化则需要采取如下两种方式处理</p> <p>1.将 js 文件后缀名修改为 .mjs 才⾏。</p> <p>2.在package.json中设置&quot;type&quot;=&quot;module&quot;</p></blockquote> <h2 id="十二、vue-cli"><a href="#十二、vue-cli" class="header-anchor">#</a> 十二、Vue CLI</h2> <p>Vue CLI 是 Vue.js 开发的标准工具或者说脚手架，是 Vue 官方提供的标准化开发工具（开发平台），它提供命令行和 UI 界面，方便创建 Vue 工程、配置第三方依赖、编译 vue 工程。</p> <p>简单来说，Vue CLI 就是一个帮助我们快捷搭建 Vue 项目的工具。但这个工具需要大家事先安装好 Node.js 和 NPM。可以通过以下命令查看自己电脑上安装版本：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">node</span> <span class="token parameter variable">-v</span>
<span class="token function">npm</span> <span class="token parameter variable">-v</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_12-1-安装-vue-cli"><a href="#_12-1-安装-vue-cli" class="header-anchor">#</a> 12.1 安装 Vue ClI</h3> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment">## 安装 Vue ClI</span>
<span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> @vue/cli
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_12-2-创建运行项目"><a href="#_12-2-创建运行项目" class="header-anchor">#</a> 12.2 创建运行项目</h3> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment">## 创建项目 my-project</span>
vue create my-project
<span class="token comment">## 创建过程需要进行一些子自定义配置</span>

<span class="token comment">## 到上面项目 my-project 根目录</span>
<span class="token builtin class-name">cd</span> my-project
<span class="token comment">## 运行以下命令</span>
<span class="token function">npm</span> run serve
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_12-3-项目结构"><a href="#_12-3-项目结构" class="header-anchor">#</a> 12.3 项目结构</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>my-project
├─dist                              ## 打包后的输出目录，基于 webpack 将 vue 项目打包为普通 html 项目
├─node_modules                      ## 当前项目本地包下载存储的文件夹
├─public                            ## 静态资源存放目录
├─src                               ## 源码目录
│  ├─App.vue                        ## **Vue 文件，项目入口文件**
│  ├─main.js                        ## **配置入口文件**
│  ├─registerServiceWorker.js       ## PWA 应用，web workers 文件，判断应用是否离线
│  ├─assets                         ## 存放项目需要编译的静态资源，会被 webpack 处理
│  ├─components                     ## 页面间共享组件包
│  ├─router                         ## 路由文件
│  ├─store                          ## vuex 文件，负责 vue 的组件间通信
│  └─views                          ## 视图文件，存放视图页面的 vue 文件
├─.gitignore                        ## git 版本控制工具，忽略提交的配置文件
├─babel.config.js                   ## babel 配置文件，用来将 ES6 转换为 ES5 的工具
├─jsconfig.json                     ## JS 配置文件
├─package.json                      ## npm 包管理配置文件
├─README.md                         ## 项目描述文件
├─vue.config.js                     ## vue + webpack 配置文件
└─yarn.lock                         ## yarn 包锁定文件，锁定已安装的每个包版本，避免多环境下安装版本不一致问题
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><blockquote><p>以后重点关注的是 src 和 vue.config.js。</p></blockquote> <h3 id="_12-4-vue-文件"><a href="#_12-4-vue-文件" class="header-anchor">#</a> 12.4 vue 文件</h3> <p>这种文件可以当场模板，可以作为页面，一般由三个部分构成，包含：</p> <ul><li>template：用来编写结构，注意只能包含一个根标签。</li> <li>style：用来编写样式，可以写普通 CSS，也可以写 LESS，SCCS 等（但需要 Webpack 支持），其还有两个属性：
<ul><li>scope，由这个属性，局部样式，反之就是全局样式。</li> <li>lang，只能编写 CSS 语言。</li></ul></li> <li>script：用来编写数据和逻辑，这里默认使用 ES6 模块化，导入构建 Vue 对象的配置，只是其中数据需要定义名为 data 函数，在函数中返回要展示的数据。</li></ul> <h2 id="十三、vue-router"><a href="#十三、vue-router" class="header-anchor">#</a> 十三、vue-router</h2> <p>目前前端流行的三大框架，都有自己的路由实现：</p> <ul><li>Angular 的 ngRouter</li> <li>React 的 ReactRouter</li> <li>Vue 的 vue-router</li></ul> <p><a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">vue-router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是 Vue 的官方路由插件，它和 Vue 是深度集成的，适合用于构建单页面应用。</p> <blockquote><p>vue-router 是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来；在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换。</p></blockquote> <h3 id="_13-1-vue-router-基本使用"><a href="#_13-1-vue-router-基本使用" class="header-anchor">#</a> 13.1 vue-router 基本使用</h3> <p>在之前使用 Vue CLI 创建的项目的 src 目录下的 views 中，创建 <code>TestView.vue</code> ，随意写入一些信息。</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>测试路由<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>找到 <code>router/index.js</code>，并加入下列内容：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token keyword">import</span> HomeView <span class="token keyword">from</span> <span class="token string">'../views/HomeView.vue'</span>
<span class="token keyword">import</span> TestView <span class="token keyword">from</span> <span class="token string">'../views/TestView.vue'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter

<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">component</span><span class="token operator">:</span> HomeView
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'about'</span><span class="token punctuation">,</span>
    <span class="token comment">// route level code-splitting</span>
    <span class="token comment">// this generates a separate chunk (about.[hash].js) for this route</span>
    <span class="token comment">// which is lazy-loaded when the route is visited.</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="token string">'../views/AboutView.vue'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/test'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">component</span><span class="token operator">:</span> TestView
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><p>修改  App.vue 文件，内容如下：</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span> |
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span> |
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/test<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><code>router-link</code> 最终会被渲染为 a 标签，当点击其时，会通过 <code>router-view</code> 来显示对应视图内容。</p> <h3 id="_13-2-路由懒加载"><a href="#_13-2-路由懒加载" class="header-anchor">#</a> 13.2 路由懒加载</h3> <p>可以看到，我们有两种引⼊组件的⽅式。第一种比较能理解，第二种我们称之为“路由懒加载”。⽽这个
懒加载中，有个 webpackChunkName ，这东西我们称为魔法注释。</p> <blockquote><p>魔法注释的作用：
Webpack 在打包的时候，对异步引⼊的库代码（lodash）进⾏代码分割时，为分割后的代码块取的名字。</p> <p>Vue 中运⽤ import 的懒加载语句以及 Webpack 的魔法注释，在项目进⾏ Webpack 打包的时候，对不同模块进行代码分割，在⾸屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。</p></blockquote> <p>当⼀个 Vue 项目很大的时候，对于一些“暂时”用不到的组件，我们可以不进行加载，等到用到此组件时
再加载。这样可以优化 SPA 应用首次加载白屏情况，也给用户更好的体验。这就是 Vue 路由懒加载。</p> <h2 id="十四、路由模式"><a href="#十四、路由模式" class="header-anchor">#</a> 十四、路由模式</h2> <h3 id="_14-1-spa"><a href="#_14-1-spa" class="header-anchor">#</a> 14.1 SPA</h3> <p>现代前端项目多为单页 Web 应用（SPA：single page web application 的简称，译为单页 Web 应用），而路由在其中起重要作用。简单的说 SPA 就是一个 Web 项目只有一个 HTML 页面，一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用 JS 动态的变更页面的内容，从而达到模拟以前非单页面应用多个页面之间跳转的效果。</p> <p>比如这个<a href="https://cn.vuejs.org/guide/quick-start.html" target="_blank" rel="noopener noreferrer"> Vue.js <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>就是单页面应用，而这个<a href="https://www.qq.com/" target="_blank" rel="noopener noreferrer">腾讯网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>就是非单页面应用。</p> <p>最开始的 Web 应用是多页面的，比如我们之前 Web 阶段做 Web 应用全是非单页面应用，直到 AJAX 的出现，才慢慢有了 SPA。</p> <p>SPA 的出现大大提高了 Web 应用的交互体验。在与用户的交互过程中，不再需要重新刷新页面，获取数据也是通过 AJAX 异步获取，页面显示变得更加流畅。</p> <p>但由于 SPA 中用户的交互是通过 JS 改变 HTML 内容来实现的，页面本身的 url 并没有变化，这导致了两个问题：</p> <ul><li>SPA 无法记住用户的操作记录，无论是刷新、前进还是后退，都无法展示用户真实的期望内容。</li> <li>SPA 中虽然由于业务的不同会有多种页面展示形式，但只有一个 url，对 SEO 不友好，不方便搜索引擎进行收录。</li></ul> <h3 id="_14-2-前端路由"><a href="#_14-2-前端路由" class="header-anchor">#</a> 14.2 前端路由</h3> <p>前端就是为了解决上述 SPA 问题而出现的。那前端路由到底是什么呢？</p> <p>简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每次页面变更展示匹配一个特殊的 url。在刷新、前进、后退和 SEO 时均通过这个特殊的 url 来实现。为实现这一目标，我们需要做到以下二点：</p> <ul><li>改变 url 且不让浏览器向服务器发送同步请求。</li> <li>可以监听到 url 的变化。</li></ul> <p>接下来要介绍的 hash 模式和 history 模式，就是实现了上面的功能。</p> <h4 id="_14-2-1-hash-模式"><a href="#_14-2-1-hash-模式" class="header-anchor">#</a> 14.2.1 hash 模式</h4> <p>URL 的 hash 也就是锚点（#），本质上是改变 <code>window.location</code> 的 <code>href</code> 属性，我们可以通过直接赋 <code>location.hash</code> 来改变 <code>href</code>，但是页面不发生刷新。</p> <p><strong><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/hash.png" alt=""></strong></p> <p>由于 hash 值的变化不会导致浏览器像服务器发送请求，而且 hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。</p> <h4 id="_14-2-2-history-模式"><a href="#_14-2-2-history-模式" class="header-anchor">#</a> 14.2.2 history 模式</h4> <p>在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       	<span class="token comment">// 后退一页</span>
history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        	<span class="token comment">// 前进两页</span>
history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// 前进一页</span>
history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      	<span class="token comment">// 后退一页</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>在 HTML5 的规范中，history 新增了以下几个 API：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>history<span class="token punctuation">.</span><span class="token function">pushState</span><span class="token punctuation">(</span>参数<span class="token punctuation">,</span>名称<span class="token punctuation">,</span>路径<span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// 添加新的状态到历史状态栈</span>
history<span class="token punctuation">.</span><span class="token function">replaceState</span><span class="token punctuation">(</span>参数<span class="token punctuation">,</span>名称<span class="token punctuation">,</span>路径<span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// 用新的状态代替当前状态</span>
history<span class="token punctuation">.</span>state       					<span class="token comment">// 返回当前状态对象</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_14-2-3-两种模式对比"><a href="#_14-2-3-两种模式对比" class="header-anchor">#</a> 14.2.3 两种模式对比</h4> <p><strong>Hash 模式：</strong></p> <ul><li><strong>特点：</strong> <ol><li>URL 中带有 <code>#</code> 符号，例如 <code>http://example.com/#/about</code>。</li> <li>路由信息保存在 URL 的哈希部分。</li></ol></li> <li><strong>优点：</strong> <ol><li>兼容性好：不会影响到浏览器的刷新、后退、前进等操作，因为改变哈希不会导致浏览器重新加载页面。</li> <li>可以直接部署在静态文件服务器上，无需特殊配置。</li></ol></li> <li><strong>缺点：</strong> <ol><li>URL 看起来不太美观，带有 <code>#</code> 符号。</li> <li>不利于 SEO：搜索引擎对于哈希部分的内容不会进行解析，因此不利于搜索引擎优化。</li></ol></li></ul> <p><strong>History 模式：</strong></p> <ul><li><strong>特点：</strong> <ol><li>URL 更美观，没有 <code>#</code> 符号，例如 <code>http://example.com/about</code>。</li> <li>使用 HTML5 的 History API 来实现前端路由。</li></ol></li> <li><strong>优点：</strong> <ol><li>URL 美观，不含 <code>#</code> 符号，更符合用户的预期。</li> <li>更好的用户体验：使用 HTML5 的 History API，可以更自然地处理前进、后退等操作。</li></ol></li> <li><strong>缺点：</strong> <ol><li>兼容性较差：不支持 HTML5 History API 的浏览器可能会有问题。为了解决这个问题，通常需要在服务器端进行一些配置，以确保在用户访问非根路由时仍然能够正确返回 index.html。</li></ol></li></ul> <p><strong>选择建议：</strong></p> <ul><li>如果你的应用不需要考虑兼容性，且可以配置服务器以支持 history 模式，那么 history 模式是一个不错的选择，因为它提供了更美观的 URL。</li> <li>如果你的应用需要考虑兼容性，或者无法配置服务器以支持 history 模式，那么 hash 模式是一个更安全的选择，因为它在各种环境下都能正常工作。</li></ul> <h2 id="十五、element-ui"><a href="#十五、element-ui" class="header-anchor">#</a> 十五、Element UI</h2> <p>Element UI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。</p> <h3 id="_15-1-引入"><a href="#_15-1-引入" class="header-anchor">#</a> 15.1 引入</h3> <p>可以参照<a href="https://element.eleme.io/#/zh-CN/component/installation" target="_blank" rel="noopener noreferrer">ElementUI官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>1.安装ElementUI</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> i element-ui
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>2.在main.js中引入</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_15-2-使用"><a href="#_15-2-使用" class="header-anchor">#</a> 15.2 使用</h3> <p>在<a href="https://element.eleme.io/#/zh-CN/component/table" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>找表格组件，拷贝其示例代码到我们的视图文件 <code>TestView.vue</code>，启动项目测试访问看下效果。</p> <h2 id="十六、axios"><a href="#十六、axios" class="header-anchor">#</a> 十六、Axios</h2> <p>Axios[艾克丝伊欧姿] 是一个基于 promise 的 HTTP 库，可以用在浏览器和 Node.js 中。其有以下特性：</p> <ul><li>在 浏览器中创建 XMLHttpRequests</li> <li>在 Node.js 创建 http 请求</li> <li>支持 Promise API</li> <li>拦截请求和响应</li> <li>转换请求数据和响应数据</li> <li>取消请求</li> <li>自动转换 JSON 数据</li> <li>客户端支持防御 XSRF</li></ul> <p>浏览器支持情况，参见[https://www.kancloud.cn/yunye/axios/234845]。</p> <h3 id="_16-1-安装入门使用"><a href="#_16-1-安装入门使用" class="header-anchor">#</a> 16.1 安装入门使用</h3> <p>安装并引入</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>npm install axios
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_16-2-发送-get-请求"><a href="#_16-2-发送-get-请求" class="header-anchor">#</a> 16.2 发送 GET 请求</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 为给定 ID 的 user 创建请求</span>
axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/user?ID=12345'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 可选地，上面的请求可以这样做</span>
axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/user'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token constant">ID</span><span class="token operator">:</span> <span class="token number">12345</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="_16-3-发送-post-请求"><a href="#_16-3-发送-post-请求" class="header-anchor">#</a> 16.3 发送 POST 请求</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'Fred'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'Flintstone'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="十七、小结与作业"><a href="#十七、小结与作业" class="header-anchor">#</a> 十七、小结与作业</h2> <h3 id="_17-1-小结"><a href="#_17-1-小结" class="header-anchor">#</a> 17.1 小结</h3> <ul><li>了解什么是 MVVM 思想。</li> <li>掌握Vue 的常见指令。</li> <li>掌握组件以及其作用。</li> <li>掌握Vue 生命周期钩子函数的作用。</li> <li>掌握Node.js 定义及其作用，掌握 Node.js 安装。</li> <li>掌握NPM 的作用，掌握其使用。</li> <li>掌握模块化，掌握 CommonJS 模块化 和 ES6 模块化。</li> <li>掌握Webpack 作用。</li> <li>掌握Vue CLI 脚⼿架搭建项目，熟悉项目结构。</li> <li>掌握前端路由。</li> <li>掌握使用 Element UI。</li></ul> <h3 id="_17-2-作业"><a href="#_17-2-作业" class="header-anchor">#</a> 17.2 作业</h3> <p>完成部门的增删改查功能</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addFn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>新增<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">fixed</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>编号<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>名称<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">fixed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>操作<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-popconfirm</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>确定需要删除id=' + scope.row.id + '这条记录吗?'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red<span class="token punctuation">&quot;</span></span>
                        <span class="token attr-name">@confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>deleteFn(scope.row)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reference<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-popconfirm</span><span class="token punctuation">&gt;</span></span>|
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editFn(scope.row)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-dialog</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dialogName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dialogFormVisible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>SN<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>120px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.sn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>名称<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>120px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dialog-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dialogFormVisible = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>取 消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>saveFn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>确 定<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-dialog</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">initData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost/api/dept/list'</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>tableData <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">finally</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 总是会执行</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">deleteFn</span><span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost/api/dept/delete?id='</span> <span class="token operator">+</span> row<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$message</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                            <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'删除成功'</span><span class="token punctuation">,</span>
                            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'success'</span>
                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">editFn</span><span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>dialogName <span class="token operator">=</span> <span class="token string">&quot;部门编辑&quot;</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>dialogFormVisible <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>form <span class="token operator">=</span> row<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">addFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>dialogName <span class="token operator">=</span> <span class="token string">&quot;部门新增&quot;</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>dialogFormVisible <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>form <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">sn</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span> <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">saveFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>dialogFormVisible <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
            axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&quot;http://localhost/api/dept/saveOrUpdate&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$message</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                        <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'操作成功'</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'success'</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">dialogName</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
            <span class="token literal-property property">form</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
                <span class="token literal-property property">sn</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token literal-property property">dialogFormVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            <span class="token literal-property property">tableData</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">sn</span><span class="token operator">:</span> <span class="token string">&quot;KF&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;开发部&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">sn</span><span class="token operator">:</span> <span class="token string">&quot;RS&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;人事部&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">sn</span><span class="token operator">:</span> <span class="token string">&quot;CW&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;财务部&quot;</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br></div></div></div></div>  <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=Vue" title="标签">#Vue</a></div> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/2288f1/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">异步请求-Ajax</div></a> <a href="/pages/6ea31e/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">RESTful课件</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/2288f1/" class="prev">异步请求-Ajax</a></span> <span class="next"><a href="/pages/6ea31e/">RESTful课件</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/0c07b2/"><div>
            IT杂货铺
            <!----></div></a> <span class="date">03-23</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/705b35/"><div>
            人事百问
            <!----></div></a> <span class="date">03-22</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/78eb56/"><div>
            MyBatis-Plus
            <!----></div></a> <span class="date">03-12</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:langfeiyes@163.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/langfeiyes" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2024-2024
    <span><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备18007927号-1</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.a2a00aa5.js" defer></script><script src="/assets/js/2.256f807a.js" defer></script><script src="/assets/js/56.bd4c1a8e.js" defer></script>
  </body>
</html>
